import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../views/Home.vue'
// import Goods from '../views/Goods.vue'
// import Mine from '../views/Mine.vue'
// import myMain from '../components/myMain.vue'
// import Other from '../components/Other.vue'
// import Detail from '../views/Detail.vue'
// import Login from '../views/Login.vue'

Vue.use(VueRouter)

// const routes = [
//   {
//     path: '/',
//     name: 'Home',
//     component: Home
//   },
//   {
//     path: '/about',
//     name: 'About',
//     // route level code-splitting
//     // this generates a separate chunk (about.[hash].js) for this route
//     // which is lazy-loaded when the route is visited.
//     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
//   }
// ]

// const router = new VueRouter({
//   mode: 'history',
//   base: process.env.BASE_URL,
//   routes
// })

const router = new VueRouter({
  mode:"history", //路由模式 hash|history
  routes: [
    {
      path:"/home",
      // component:Home,
      component: () => import("../views/Home.vue"),
      children: [
        {
          path: "main",
          // component: myMain
          component: () => import("../components/myMain.vue"),
        },
        {
          path: "other",
          // component: Other
          component: () => import("../components/Other.vue"),
        },
        {
          path: "",
          redirect: "main"
        }
      ]
    },
    {
      path:"/goods",
      // component:Goods
      component: () => import("../views/Goods.vue"),
    },
    {
      path:"/mine",
      // component:Mine
      component: () => import("../views/Mine.vue"),
    },
    {
      path:"/detail",
      name:"mydetail",
      // component:Detail
      component: () => import("../views/Detail.vue"),
    },
    {
      path:"/detail/:id",
      // component:Detail
      component: () => import("../views/Detail.vue"),
    },
    {
      path:"/login",
      // component:Login
      component: () => import("../views/Login.vue"),
    },
    {
      path:"*", //当上面的路由完全不匹配时，走这里
      redirect: "/home" //重定向 到路由Home中
    }
  ]
})

//路由全局守卫
router.beforeEach((to,from,next) => {
  //判断将要去哪个页面时拦截
  // console.log(to,from)
  const items = ["/goods","/mine"] //指定需要拦截的所有路由
  //判断当前跳转的页面是否需要拦截
  if(items.includes(to.fullPath)){
    if(!localStorage.getItem("token")){
      //未登录 跳转到登录页
      next("/login")
      return
    }
  }
  next()
})

export default router
